<template>
    <el-dialog :title="showTitle" :visible.sync="showDialog">
        <el-form ref="deptForm" label-width="120px" :model="formData" :rules="rules">
            <el-form-item label="部门名称" prop="name">
              <el-input style="width: 80%" placeholder="1-50个字符" v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="部门编号" prop="code">
              <el-input style="width: 80%" placeholder="1-50个字符" v-model="formData.code"></el-input>
            </el-form-item>
            <el-form-item label="部门负责人" prop="manager">
              <el-select style="width: 80%" placeholder="请选择" v-model="formData.manager" @focus="getEmployeeSimple">
                  <el-option
                  v-for="item in peoples"
                  :key="item.id"
                  :value="item.username"
                  :label="item.username"
                  >
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门介绍" prop="introduce" v-model="formData.introduce">
              <el-input
                style="width: 80%"
                placeholder="1300个字符"
                type="textarea"
                v-model="formData.introduce"
              ></el-input>
            </el-form-item>
        </el-form>
        <!-- 放置底部操作栏的插槽 -->
        <el-row slot="footer" type="flex" justify="center">
            <el-col :span="6">
                <el-button type="primary" size="small" @click="submitForm('deptForm')">确定</el-button>
                <el-button size="small" @click="resetForm('deptForm')">取消</el-button>
            </el-col>
        </el-row>
    </el-dialog>
</template>

<script>
    import { getDepartments, getEmployeeSimple, addDepartments, getDepartDetail, updateDepartments } from "@/api/departments"
    export default {
        props: {
            showDialog: {
                type: Boolean,
                default: false
            },
            treeNode: {
              type: Object,
              default: null,
            }
        },
        data() {
          const checkNameRepet = async (rules,value,callback) => {
            let { depts } = await getDepartments();
            let isRepet = false;
            // 编辑部分
            if(this.formData.id) {
              isRepet = depts
              .filter(item => item.id !== this.formData.id && item.pid === this.treeNode.id)
              .some(item => item.name === value)
            } else { // 新增部分
              isRepet = depts
              .filter( (item) => item.pid === this.treeNode.id)
              .some( (item) => item.name === value)
            }
            

              isRepet?callback(new Error(`组织架构中已经有部门使用${value}名字`)):callback();
          };
          const checkCodeRepet = async (rules,value,callback) => {
            let { depts } = await getDepartments();
            let isRepet = false;
            if (this.formData.id) {
              isRepet = depts
              .some(item => item.id !== this.formData.id && item.code === value && value)
            } else {
              isRepet = depts
              .some((item) => item.code === value && value)
            }
            

              isRepet?callback(new Error(`组织架构中已经有部门使用${value}编码`)):callback();
          }
          return {
            formData: {
              code: '',	
              introduce: '',	
              manager: '',
              name: ''
            },
            rules: {
              name: [
                { required: true, message: "部门名称不能为空", trigger: "blur" },
                {
                  min: 1,
                  max: 50,
                  message: "部门名称在1-50字符以内",
                  trigger: "blur"
                },
                {validator: checkNameRepet, trigger: "blur"}
              ],
              code: [
                { required: true, message: "部门编号不能为空", trigger: "blur" },
                {
                  min: 1,
                  max: 50,
                  message: "部门编号在1-50字符以内",
                  trigger: "blur"
                },
                {validator: checkCodeRepet, trigger: "blur"}
              ],
              introduce: [
                { required: true, message: "部门介绍不能为空", trigger: "blur" },
                {
                  min: 1,
                  max: 1300,
                  message: "部门编号在1-1300字符以内",
                  trigger: "blur"
                }
              ]
            },
            peoples: [],
          }
        },
        computed: {
          showTitle() {
            return this.formData.id?"编辑部门":"增加部门";
          }
        },
        methods: {
          async getDepartDetail(id) {
            this.formData = await getDepartDetail(id)
          },
          async getEmployeeSimple() {
            this.peoples = await getEmployeeSimple();
          },
          submitForm(formname) {
            this.$refs[formname].validate(async (isOk) => {
              if(isOk) {
                if (this.formData.id) {
                  await updateDepartments(this.formData)
                } else {
                  await addDepartments({ ...this.formData, pid: this.treeNode.id });
                }
                
                this.$emit("addDepts");
                this.$emit("update:showDialog", false)
                this.formData = {
                  code: "",
                  introduce: "",
                  manager: "",
                  name: "",
                };
              } else {
                console.log("error submit!!");
                return false;
              }
            })
          },
          resetForm(formname) {
             this.formData = {
              code: "",
              introduce: "",
              manager: "",
              name: "",
            };
            this.$refs[formname].resetFields();
            this.$emit("update:showDialog", false)
          }
        }
    }
</script>

<style scoped>
  .el-dialog__headerbtn i{
    display: none;
  }
</style>